<script setup lang="tsx">
import { StepBackwardOutlined } from "@ant-design/icons-vue";
import { onMounted, ref } from "vue";
import { type Fields } from "./packages";
// import { VForm, VEditModal } from './packages'

const mockList = [
  {
    label: "root 1",
    value: "1",
    oneLevelName: "玉米",
    children: [
      {
        label: "parent 1",
        value: "parent 1",
        oneLevelName: "大米",
        children: [
          {
            label: "parent 1-0",
            value: "parent 1-0",
            oneLevelName: "红豆",
            children: [
              {
                label: "my leaf",
                value: "leaf1",
                oneLevelName: "绿豆",
              },
              {
                label: "your leaf",
                value: "leaf2",
                oneLevelName: "绿豆sadsa",
              },
            ],
          },
          {
            label: "parent 1-1",
            value: "parent 1-1",
            oneLevelName: "红sdad豆",
          },
        ],
      },
      {
        label: "parent 2",
        value: "parent 2",
      },
    ],
  },
];

const fields = ref<Fields[]>([
  {
    label: "变更单号",
    key: "orderNumber",
    el: "select",
    props: {
      placeholder: "请输入变更单号",
      options: [
        {
          label: "是",
          value: 1,
          oneLevelName: "玉米",
        },
        {
          label: "否",
          value: 0,
          oneLevelName: "小麦",
        },
      ],
      showSearch: true,
      filterOption: (input: string, option: any) => {
        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      },
    },
    renderSlots: {
      option: (option) => {
        return (
          <>
            <span style="float: left"> {option.label} </span>
            <span class="float-right text-[13px] text-[#909399]">
              作物：{option.oneLevelName || "-"}
            </span>
          </>
        );
      },
    },
    rules: [
      {
        required: true,
        message: "请输入变更单号",
        trigger: "change",
      },
    ],
    emit: ["change"],
  },
  {
    label: "是否提交",
    key: "documentStatus",
    el: "select",
    props: {
      placeholder: "请选择是否提交",
      options: [],
      fatch: (api) => {
        const list = [
          {
            label: "测试1",
            value: 1,
          },
          {
            label: "测试2",
            value: 2,
          },
        ];
        api.setFieldData &&
          api.setFieldData({
            documentStatus: {
              options: list,
            },
          });
      },
    },
    rules: [
      {
        required: true,
        message: "请选择是否提交",
        trigger: "change",
      },
    ],
    on: {
      change: () => {
        console.log("------");
      },
    },
  },
  {
    key: "remark",
    label: "备注",
    props: {},
    rules: [
      {
        required: true,
        message: "请选择是否提交",
        trigger: "change",
      },
    ],
    customRender: ({
      value,
      update,
      disabled,
    }: {
      value: any;
      update: (val: any) => void;
      disabled: boolean;
    }) => (
      <div>
        <a-input
          placeholder="请输入备注---sdasda-"
          value={value}
          disabled={disabled}
          onChange={(e: any) => update(e.target.value)}
        />
      </div>
    ),
  },
  {
    el: "tree-select",
    key: "departId",
    label: "部门",
    props: {
      treeData: mockList,
    },
    renderSlots: {
      title: (option) => {
        return (
          <>
            <span style="float: left"> {option.label} </span>
            <span class=" float-right text-[13px] text-[#909399]">
              部门：{option.oneLevelName}
            </span>
          </>
        );
      },
    },
    defaultValue: "1",
  },
  {
    el: "input",
    key: "remark1",
    label: "环境",
    defaultValue: "测试",
  },
  {
    el: "input",
    key: "remark3",
    label: "郑航与",
    slot: true,
    rules: [
      {
        required: true,
        message: "请选择郑航与",
        trigger: "change",
      },
    ],
  },
  {
    el: "date-picker",
    key: "startTime",
    label: "录入时间",
    defaultValue:
      new Date().getFullYear() +
      "-" +
      (new Date().getMonth() + 1) +
      "-" +
      new Date().getDate(),
  },
  // {
  //   el: 'MUpload',
  //   key: 'fileList',
  //   label: '上传文件',
  //   defaultValue: 'https://ts1.tc.mm.bing.net/th/id/R-C.22cdb21060f95297035a380467123768?rik=ZZ5YeI3loyMu0w&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1307%2f10%2fc0%2f23166997_1373443405186.jpg&ehk=UuR5odrdPxwmlbjY0C5WGXyxSJdyN%2b1aYi%2bnwiG6DPQ%3d&risl=&pid=ImgRaw&r=0',
  //   props: {

  //   },
  // }
]);
const addFields = ref<Fields[]>([
  {
    label: "变更单号",
    key: "orderNumber",
    el: "select",
    props: {
      placeholder: "请输入变更单号",
      options: [
        {
          label: "是",
          value: 1,
          oneLevelName: "玉米",
        },
        {
          label: "否",
          value: 0,
          oneLevelName: "小麦",
        },
      ],
      showSearch: true,
      filterOption: (input: string, option: any) => {
        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      },
    },
    renderSlots: {
      option: (option) => {
        return (
          <>
            <span style="float: left"> {option.label} </span>
            <span class="float-right text-[13px] text-[#909399]">
              作物：{option.oneLevelName || "-"}
            </span>
          </>
        );
      },
    },
    rules: [
      {
        required: true,
        message: "请输入变更单号",
        trigger: "change",
      },
    ],
    emit: ["change"],
  },
  {
    label: "是否提交",
    key: "documentStatus",
    el: "select",
    props: {
      placeholder: "请选择是否提交",
      options: [],
      fatch: (api) => {
        const list = [
          {
            label: "测试1",
            value: 1,
          },
          {
            label: "测试2",
            value: 2,
          },
        ];
        api.setFieldData &&
          api.setFieldData({
            documentStatus: {
              options: list,
            },
          });
      },
    },
    rules: [
      {
        required: true,
        message: "请选择是否提交",
        trigger: "change",
      },
    ],
    on: {
      change: () => {
        console.log("------");
      },
    },
  },
  {
    key: "remark",
    label: "备注",
    props: {},
    rules: [
      {
        required: true,
        message: "请选择是否提交",
        trigger: "change",
      },
    ],
    customRender: ({
      value,
      update,
      disabled,
    }: {
      value: any;
      update: (val: any) => void;
      disabled: boolean;
    }) => (
      <div>
        <a-input
          placeholder="请输入备注---sdasda-"
          value={value}
          disabled={disabled}
          onChange={(e: any) => update(e.target.value)}
        />
      </div>
    ),
  },
  {
    el: "tree-select",
    key: "departId",
    label: "部门",
    props: {
      treeData: mockList,
    },
    renderSlots: {
      title: (option) => {
        return (
          <>
            <span style="float: left"> {option.label} </span>
            <span class=" float-right text-[13px] text-[#909399]">
              部门：{option.oneLevelName}
            </span>
          </>
        );
      },
    },
    defaultValue: "1",
  },
  {
    el: "input",
    key: "remark1",
    label: "环境",
    defaultValue: "测试",
  },
  {
    el: "input",
    key: "remark3",
    label: "郑航与",
    slot: true,
    rules: [
      {
        required: true,
        message: "请选择郑航与",
        trigger: "change",
      },
    ],
  },
  // {
  //   el: 'MUpload',
  //   key: 'fileList',
  //   label: '上传文件',
  //   defaultValue: 'https://ts1.tc.mm.bing.net/th/id/R-C.22cdb21060f95297035a380467123768?rik=ZZ5YeI3loyMu0w&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1307%2f10%2fc0%2f23166997_1373443405186.jpg&ehk=UuR5odrdPxwmlbjY0C5WGXyxSJdyN%2b1aYi%2bnwiG6DPQ%3d&risl=&pid=ImgRaw&r=0',
  //   props: {

  //   },
  // }
]);
const formApi = ref();
const formEventApi = ref();
const submitTest = () => {
  formApi.value
    ?.validate?.()
    .then((res) => {
      console.log(res, "res");
    })
    .catch(() => {});
};

onMounted(() => {
  // formEventApi.value.on('orderNumber-change', (data, opt, ...args) => {
  //   console.log(`表单1-字段变化:`, data, opt, args);
  // });
});

const clear = () => {
  formApi.value?.resetFormFields?.();
};

// <InstanceType<typeof VEditModal>>
const vEdieFormRef = ref();
const open = () => {
  vEdieFormRef.value?.showModal(0, false);
};

const addHttp = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ data: null, msg: "ok", code: 200 });
    }, 1000);
  });
};

const reload = () => {
  console.log("reload");
};

const formConfig = {
  offset: 300,
};

const value3 = ref();
</script>

<template>
  <MConfigProvide
    v-bind="{
    tableConfig: {
      transform: (data: any) => ({
        data: data.data.record,
        total: data.data.total
      }),
      transformParams: (params: any) => ({
        page: params.current,
        pageSize: params.pageSize
      })
    }
  }"
  >
    <MForm
      v-model:api="formApi"
      :fields="fields"
      search
      :formOptions="{ layout: 'inline' }"
      formId="search-form"
      :formData="{ enmd: 30, orderNumber: 1 }"
    >
      <template #remark3="{ value, setValue }">
        <a-input
          style="width: 100%"
          :value="value"
          @change="(e) => setValue(e.target.value)"
          placeholder="请输入备注"
        />
      </template>
    </MForm>
    <!-- <a-button @click="submitTest">提交</a-button>
  <a-button @click="clear">清除</a-button> -->
    <a-button @click="open">打开弹窗</a-button>
    <MEditModal
      ref="vEdieFormRef"
      :init-data="{ orderNumber: 1 }"
      :fields="addFields"
      formId="edit-form"
      :httpAdd="addHttp"
      :form-config="formConfig"
      @reload="reload"
    >
      <template #remark3="{ value, setValue, disabled }">
        <a-input
          style="width: 100%"
          :disabled="disabled"
          :value="value"
          @change="(e) => setValue(e.target.value)"
          placeholder="请输入备注"
        />
      </template>
    </MEditModal>

    <MTreeSelect
      style="width: 300px"
      :treeData="mockList"
      v-model:value="value3"
    >

    </MTreeSelect>
  </MConfigProvide>
</template>

<style>
#app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
</style>
